<template>


  <div class="courses zCourses"><!---->
    <div class="course hover_boxShadow_defaut_shadow" v-for="item in data">
      <div class="iconPathBox">
        <img  :src="item.iconPath" lazy="loaded"></div>
        <div :title="item.name" class="name"> {{item.name}} </div>
        <div :title="item.name" class="desc"> 简介：{{item.currDesc}}</div>
      <div class="time">上课时间:<span> {{formatTime(item.startTeachingTime)  }}~{{ formatTime(item.finishTeachingTime) }} </span></div></div>


      </div>





      <!-- <ul>
    <li v-for="item in data">
    
      课程名：{{item.name}}    
    
    </li>

</ul> -->

</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {getCurrList} from '../utils/request'
const data=ref([])


const formatTime=(time)=>{

  return time.replace('T', ' ').replace('Z', ' ').split(' ')[0]
}
onMounted(async() => {
 // console.log('在组件TestNet里调用：Mouse position is at:', x.value, y.value);
 const result= await fetch('/api/curriculum/list') //getCurrList()

 const r1=await result.json()
 //debugger
  data.value =r1.data
});

</script>

<style scoped>

.courses {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
}

.courses .course {
    cursor: pointer;
    padding: 4px 10px 0;
    margin-bottom: 15px;
    width: 250px;
    height: 240px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #fff;
}

 .iconPathBox img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 220px;
    height: 135px;
    border-radius: 8px;
}

.hover_boxShadow_defaut_shadow {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .16);
    transition: box-shadow .2s linear;
}

.course .name,.course .desc {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>